import { useEffect, useState } from "react";
import {getAccountList} from '../../api/account' //请求相关
import {Table,Space,Button,Pagination,Flex} from 'antd'
import defaultUserIcon from '../../assets/imgs/logo.png'
import Pannel from '../../component/Pannel/Pannel'
import dayjs from 'dayjs'

function AccountList(props){
    // 表格的 表头
    const columns = [
        {
          title: '序号',
          dataIndex: 'id',
          key: 'id',
          render: (text) => <a>{text}</a>,
        },
       
        {
          title: '账号',
          dataIndex: 'account',
          key: 'account',
        },
        {
          title: '用户组',
          key: 'userGroup',
          dataIndex: 'userGroup'
        },
        {
          title: '图像',
          key: 'imgUrl',
          render: (_,record) => {
            //   console.log(_,record) _,record 表示当前记录
            return (_.imgUrl == "default.jpg") 
            ? <img src={defaultUserIcon } width="50" height="50"/> 
            : <img src={_} width="50" height="50"/>
          }
          ,
        },
        {
            title: '创建时间',
            dataIndex: 'ctime',
            key: 'ctime',
            // 使用render + dayjs 格式化时间
            // record  当前行的值（具体的数据）
            // render:(text,record)=>{
            //     return record.ctime!=null
            //     ? dayjs(record.ctime).format("YYYY-MM-DD HH:mm:ss")
            //     :"";
            // }
            // text  当前行数据（是一个对象）
            render:(text,record)=>{
                return text!=null
                ? dayjs(text).format("YYYY-MM-DD HH:mm:ss")
                :"";
            }
        },
        {
            title: '管理',
            key: 'opreator',
            render: (_, record) => (
              <Space size="middle">
                  <Button type="primary">编辑</Button>
                  <Button type="warning">删除</Button>
              </Space>
            ),
        }
    ];

    // 表格的数据
    //   const data = [
    //     {
    //       id: '1',
    //       account: 'John Brown',
    //       userGroup: 32,
    //       imgUrl: 'New York No. 1 Lake Park',
    //       tags: ['nice', 'developer'],
    //       ctime:"2023-12-03 17:05:30"
    //     },
        
    //   ];

    // 响应式数据
    const [list,setList] = useState([])

    // 分页设置
    const [total,setTotal] = useState(0); //总条数
    const [currentPage,setCurrentPage] = useState(1); //默认是第1页
    const [pageSize,setPageSize] = useState(2); //默认是每页条数

    // 调用后端接口，获取列表数据
    // {currentPage:currentPage,pageSize:pageSize} es6 简写 {currentPage,pageSize}
    const getList = async({currentPage,pageSize})=>{

        // 调用请求方法，获取数据
        let res = await getAccountList({currentPage,pageSize})
        // console.log(res)

        // 成功，保存到状态中
        if(res.code == 0){
            setTotal(res.total);  //保存
            setList([...res.data]) //数组、对象 要用其自身特有的方法
        }
    }

    // 当是一个空数组的时候，只在组件加载完成后执行1次，相当于Vue中的mounted 生命周期函数
    // 相当于class形式的组件中的 componentDidMount 生命周期函数（组件挂载完成）
    useEffect(()=>{
        //调用异步方法，获取数据（不要在这儿直发请求）
        getList({currentPage,pageSize});

        //当是一个空数组的时候，可以反回一个函数，来模拟componentWillUnmounted (组件卸载身份)
        return ()=>{
            console.log('准备卸载了，做一些清理工作')
        }
    },[])

    //页码改变的时候，自动触发
    const onChange = (pageNumber) => {
        console.log('Page: ', pageNumber);
       
        // 重新发请求，获取数据
        getList({currentPage:pageNumber,pageSize});

        // 保存当前的页码(注意，是异步的，所以放后面，别的地方用，getList调用的时候，给最新的值)
        setCurrentPage(pageNumber)
    };

    //改变每页显示条目数
    const onShowSizeChange = (current, pageSize) => {
        // console.log(current, pageSize);
        setPageSize(pageSize)
        getList({currentPage,pageSize:pageSize});
    };

    // 
    return(
        <Pannel title="账号列表">
        <Table columns={columns} dataSource={list} 
          rowKey="id"
          // rowKey属性被设置为"id"，这意味着每一行的key将由数据源中每个对象的id属性提供。确保你的数据源中的id字段是唯一的，
          // 这样React就能够正确地追踪每个节点。

            // 不显示,使用Pagination组件实现，自已实现功能
            pagination = {false}  
            // pagination = { {
            //         position:["bottomCenter"],
            //         pageSize:2
            //   }
            // }
          
        />

        <Flex justify="center" style={{marginTop:"20px"}}>
            <Pagination 
                pageSize={pageSize} // 每页显示的数据量
                total={total}  //总共有多少数据

                defaultCurrent={currentPage}  // 默认当前页
                onChange={onChange} //改变页面码时处理
                onShowSizeChange={onShowSizeChange} //改变每页面显示条数时处理

                showQuickJumper // 显示每页数据量选择器
                showSizeChanger // 显示每页数据量选择器
                pageSizeOptions={[2,10,30,40,50]}
            />
        </Flex>
       </Pannel>
    )
}

export default AccountList;